<template>
  <div class="main">
    <el-card style="max-width: 50%">
      <template #header>
        <div class="card-header">
          <span>用户修改密码</span>
        </div>
      </template>
      <el-form
        label-width="auto"
        style="max-width: 600px"
        :model="form"
        ref="Form"
        :rules="rules"
      >
        <el-form-item label="用户名">
          <!-- value是input输入框中的值属性，前面加冒号证明是动态的 -->
          <el-input :value="useStore.username" disabled />
        </el-form-item>
        <el-form-item label="旧密码" prop="password">
          <el-input
            v-model="form.password"
            type="password"
            placeholder="请输入旧密码"
            show-password
          />
        </el-form-item>
        <el-form-item label="新密码" prop="new_password">
          <el-input
            v-model="form.new_password"
            type="password"
            placeholder="请输入新密码"
            show-password
          />
        </el-form-item>
        <el-form-item label="确认密码" prop="password_confirm">
          <el-input
            v-model="form.password_confirm"
            type="password"
            placeholder="请确认密码"
            show-password
          />
        </el-form-item>
        <div class="center">
          <el-button type="primary" @click="submit(Form)">确认修改</el-button>
          <el-button type="primary" @click="reset(Form)">重置</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
// 引入用户小仓库
import useUserStore from '@/store/modules/user'
// 引入接口
import { reqPassword } from '@/api/user/index'
import {
  ElNotification,
  FormInstance,
  FormRules,
  ElMessageBox,
} from 'element-plus'

let useStore = useUserStore() // 创建用户实例

const form = reactive({
  password: '',
  new_password: '',
  password_confirm: '',
})
// 确认修改
const submit = async (formEl: FormInstance | undefined) => {
  // 等待表单校验完成
  await Form.value.validate()
  let res = await reqPassword(useStore.userId, form)
  if (res.code === 200) {
    ElNotification({
      message: res.msg,
      type: 'success',
    })
    // 清空表单及其验证
    if (!formEl) return
    formEl.resetFields()
  } else {
    ElNotification({
      message: res.error_msg,
      type: 'error',
    })
  }
}
// 重置
const reset = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
// 密码校验
const Form = ref<FormInstance>()
const validatorPassword = (rule: any, value: any, callback: any) => {
  let regExp = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z0-9]{6,18}$/
  if (regExp.test(value)) {
    callback()
  } else {
    callback(new Error('密码必须包含至少1个字母和1个数字，且长度为6-18位'))
  }
}
const validatorPasswordConfirm = (rule: any, value: any, callback: any) => {
  if (value === '' || value === null) {
    callback(new Error('确认密码不能为空'))
  } else if (value !== form.new_password) {
    callback(new Error('两次输入的密码不一致'))
  } else {
    callback() // 校验成功
  }
}
const rules = reactive<FormRules>({
  old_password: [{ validator: validatorPassword, trigger: 'change' }],
  new_password: [{ validator: validatorPassword, trigger: 'change' }],
  password_confirm: [
    { validator: validatorPasswordConfirm, trigger: 'change' },
  ],
})
</script>

<style lang="scss" scoped>
.main {
  .card-header {
    text-align: center;
    font-size: 25px;
  }
  .center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
